<template>
  <div class="app-container">
    <el-form :inline="true" :model="form" ref="form-inline">
        <el-row  v-for="(i, index) in form.formData" :key="index">
            <el-form-item label="企业名称" :prop="'formData.' + index + '.entName'" :rules="{required: true, message: '企业名称为空', trigger: 'blur' }">
                <el-input v-model="i.entName" placeholder="企业名称"></el-input>
            </el-form-item>
            <el-form-item  label="企业信用代码" :prop="'formData.' + index + '.entUniId'" :rules="{required: true, message: '企企业信用代码为空', trigger: 'blur' }">
                <el-input  style="width: 250px;" v-model="i.entUniId" placeholder="企业信用代码"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="danger" v-show="form.formData.length > 1" @click="del(index)">删除 </el-button>
                <el-button type="success" v-show="index === form.formData.length - 1" @click="add">新增 </el-button>
                <el-button type="primary" v-show="index === form.formData.length - 1" @click="onSubmit">提交 </el-button>
                <el-upload
                    v-show="index === form.formData.length - 1"
                    ref="upload"
                    accept=".xlsx"
                    class="upload-demo"
                    :on-success="onSuccess"
                    :on-progress="onProgress"
                    :on-error="handeError"
                    :with-credentials="true"
                    :action="uploadUrl"
                    :disabled="uploadLoading ? true : false"
                    multiple>
                    <el-button class="el-upload__btn" :loading="uploadLoading" type="info">{{ uploadLoading ? '上传中' : '上传' }}<i class="el-icon-upload el-icon--right"></i></el-button>
                </el-upload>
            </el-form-item>
        </el-row>
       
    </el-form>
    <Table 
          class="businessFormTable"
          ref="Table" 
          :tableData="tableData" 
          :tableHeadData="tableHeadData" 
          v-loading="tableLoading"
          :pageHidden="true"
          @linkTo="linkTo"
      />
  </div>
</template>

<script>
import Table from '@/components/table/table.vue';
import { JueceCommon } from './juece.common'
import { batchAdd } from '@/api/user'
export default {
  components:{
    Table
  },
  data() {
    return {
      form:{
        formData:[{
            entName:'',
            entUniId:''
        }]
      },
      uploadUrl:'',
      tableData:[],
      tableHeadData:[],
      tableLoading:false,
      uploadLoading:false
    }
  },
  created(){
    this.jueceCommon = new JueceCommon(this);
    this.uploadUrl = process.env.VUE_APP_BASE_API + '/batch/upload';
    // this.test = [
    //     {
    //         "id": 65,
    //         "no": "20240126008",
    //         "entName": "姐姐哦就为佛教我欸附件为",
    //         "entUniId": "91370000212541245X",
    //         "createTime": "2024-01-26T09:05:37.000+00:00",
    //         "createUser": null,
    //         "isReg": null,
    //         "regTime": null,
    //         "sbFromTo": null,
    //         "sbTimes": null,
    //         "xzgxf": null,
    //         "bzx": null,
    //         "laxx": null,
    //         "ktgg": null,
    //         "nsxy": null,
    //         "dataTime": null
    //     }
    // ]
  },
  methods:{
    onSubmit(){
       // console.log('onSubmit',this.form)
        this.$refs['form-inline'].validate(async(valid) => {
          if (valid) {
            this.tableLoading = true;
            const res = await batchAdd(this.form.formData);
            //console.log('res',res);
            const { data } = res;
            this.tableData = this.jueceCommon.fomatData_EI(data);
            this.tableHeadData = this.jueceCommon.tableHead_EI(data[0],this);
            this.tableLoading = false;

            this.form = {
              formData:[{
                  entName:'',
                  entUniId:''
              }]
            }
          }
        });
    },
    onSuccess(response, file, fileList) {
        //console.log('response',response)
        if(response.message === 'SUCCESS'){
            this.$message.success('上传成功');
            this.tableLoading = true;
            const { data } = response;
            this.tableData = this.jueceCommon.fomatData_EI(data);
            this.tableHeadData = this.jueceCommon.tableHead_EI(data[0],this);
            this.tableLoading = false;
            this.uploadLoading = false;
            this.form = {
              formData:[{
                  entName:'',
                  entUniId:''
              }]
            }
        }else{
          this.$message.error(response.message)
        }
    },
    onProgress(ev){
      //console.log('onProgress',ev)
      this.uploadLoading = true;
    },
    handeError(err,file){
      this.uploadLoading = false;
     this.$message.error('Internal Server Error')
    },
    del(idx){
        this.form.formData.splice(idx,1)
    },
    add(){
        this.form.formData.push({
            entName:'',
            entUniId:''
        })
    },
    linkTo(row,col){
      console.log('row',row)
      this.$router.push({
        path:'/enterpriseSearch',
          query: {
            batchNo:row.no
          },
      })
    }
  }
}
</script>

<style scoped lang="scss">
.upload-demo{
    display: inline-block;
    margin-left: 10px;
    ::v-deep .el-upload-list--text{
        display: none;
    }
}
</style>